import React from 'react'

interface DistanceInfo {
  distance: number;
  timeSpan: string;
  point1: string;
  point2: string;
}

interface DistanceInfoPanelProps {
  distanceInfo: DistanceInfo;
  onClearSelection: () => void;
}

const DistanceInfoPanel: React.FC<DistanceInfoPanelProps> = ({ distanceInfo, onClearSelection }) => {
  return (
    <div style={{
      position: 'absolute',
      top: '140px',
      right: '20px',
      background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98))',
      padding: '16px',
      borderRadius: '12px',
      boxShadow: '0 8px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08)',
      zIndex: 1000,
      width: '280px',
      border: '1px solid rgba(255, 255, 255, 0.2)',
      backdropFilter: 'blur(10px)'
    }}>
      <div style={{ 
        fontSize: '16px', 
        fontWeight: 'bold', 
        marginBottom: '15px',
        color: '#333',
        background: 'linear-gradient(135deg, #ff6600, #ff8800)',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        backgroundClip: 'text',
        display: 'flex',
        alignItems: 'center',
        gap: '8px'
      }}>
        <span style={{ WebkitTextFillColor: '#ff6600' }}>📐</span>
        距离测量
      </div>
      
      <div style={{ 
        background: 'rgba(76, 175, 80, 0.1)', 
        padding: '10px', 
        borderRadius: '8px',
        marginBottom: '10px',
        border: '1px solid rgba(76, 175, 80, 0.2)'
      }}>
        <div style={{ fontSize: '12px', color: '#4CAF50', fontWeight: 'bold', marginBottom: '2px' }}>
          🚩 起点
        </div>
        <div style={{ fontSize: '13px', color: '#333', lineHeight: '1.4' }}>
          {distanceInfo.point1}
        </div>
      </div>
      
      <div style={{ 
        background: 'rgba(244, 67, 54, 0.1)', 
        padding: '10px', 
        borderRadius: '8px',
        marginBottom: '12px',
        border: '1px solid rgba(244, 67, 54, 0.2)'
      }}>
        <div style={{ fontSize: '12px', color: '#f44336', fontWeight: 'bold', marginBottom: '2px' }}>
          🏁 终点
        </div>
        <div style={{ fontSize: '13px', color: '#333', lineHeight: '1.4' }}>
          {distanceInfo.point2}
        </div>
      </div>
      
      <div style={{ 
        background: 'linear-gradient(135deg, rgba(255, 102, 0, 0.1), rgba(255, 136, 0, 0.1))', 
        padding: '12px', 
        borderRadius: '8px',
        marginBottom: '12px',
        border: '1px solid rgba(255, 102, 0, 0.2)',
        textAlign: 'center'
      }}>
        <div style={{ 
          fontSize: '20px', 
          fontWeight: '900', 
          color: '#ff6600',
          marginBottom: '3px',
          textShadow: '0 1px 2px rgba(0,0,0,0.1)'
        }}>
          {distanceInfo.distance.toFixed(2)}
        </div>
        <div style={{ 
          fontSize: '12px', 
          color: '#ff6600', 
          fontWeight: 'bold',
          marginBottom: '6px'
        }}>
          千米 (直线距离)
        </div>
        <div style={{ 
          fontSize: '11px', 
          color: '#666',
          marginBottom: '3px'
        }}>
          ≈ {(distanceInfo.distance * 1000).toFixed(0)} 米
        </div>
        <div style={{ 
          fontSize: '11px', 
          color: '#666'
        }}>
          ≈ {(distanceInfo.distance * 0.621371).toFixed(2)} 英里
        </div>
      </div>
      
      <div style={{ 
        background: 'rgba(33, 150, 243, 0.1)', 
        padding: '10px', 
        borderRadius: '8px',
        marginBottom: '12px',
        border: '1px solid rgba(33, 150, 243, 0.2)',
        textAlign: 'center'
      }}>
        <div style={{ fontSize: '12px', color: '#2196F3', fontWeight: 'bold', marginBottom: '3px' }}>
          ⏱️ 时间跨度
        </div>
        <div style={{ fontSize: '14px', color: '#2196F3', fontWeight: 'bold' }}>
          {distanceInfo.timeSpan}
        </div>
      </div>
      
      <button 
        onClick={onClearSelection}
        style={{
          width: '100%',
          padding: '10px',
          background: 'linear-gradient(135deg, #ff6600, #ff8800)',
          color: 'white',
          border: 'none',
          borderRadius: '8px',
          cursor: 'pointer',
          fontSize: '13px',
          fontWeight: 'bold',
          boxShadow: '0 4px 12px rgba(255, 102, 0, 0.3)',
          transition: 'all 0.3s ease'
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = 'translateY(-2px)'
          e.currentTarget.style.boxShadow = '0 6px 20px rgba(255, 102, 0, 0.4)'
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = 'translateY(0)'
          e.currentTarget.style.boxShadow = '0 4px 12px rgba(255, 102, 0, 0.3)'
        }}
      >
        🗑️ 清除选择
      </button>
    </div>
  )
}

export default DistanceInfoPanel 